// 支持调用API对象的内容
// console.log(api);
let context = JSON.parse('#(.__json)');
let result = {
    type: 'page',
    title: context.name,
    body: []
}
let form = {
    type: 'form', mode: 'inline', title: '', submitText: '', body: []
}
if (context.formcode) {
    form.formcode = context.formcode
    form.persistData = context.formcode
}
let container = {
    type: 'container', body: []
}
let filter_header = {}
for (g in context.groups ?? []) {
    for (f in context.groups[g].filters ?? []) {
        let filter = context.groups[g].filters[f]
        let item = {
            type: 'input-text', label: filter.name, name: `${filter.query ?? "like"}$$${filter.field}`
        }
        filter_header[item.name] = `\${${item.name}}`
        container.body.push(item)
    }
}
let services = []
if (context.groups) {
    for (g in context.groups) {
        let group = context.groups[g]
        let svc = {
            type: 'service', name: group.name, id: `componentId_${group.name}`, interval: group.interval ?? 0,
            api: {
                method: 'POST',
                url: group.sql ? `/chat/examples/custom-sql?key=${group.sql}` : `/chat/examples/monitor?key=${group.name}`,
                data: filter_header,
                adaptor: function (payload, response, api, scope) {
                    AMCOMMON.formatMetricsData(payload, group, payload)
                    return payload
                }
            },
            body: [
                {type: 'grid', columns: []}
            ]
        }
        for (m in group.metrics ?? []) {
            let metric = group.metrics[m]
            svc.body[0].columns.push({
                type: 'container', md: 6, body: [
                    {
                        type: 'chart', name: `chart_${group.name}_m${m}`, replaceChartOption: true, initFetch: false,
                        trackExpression: `\$\{chart_${group.name}_m${m}_lastUpdateTime\}`,
                        config: {
                            title: {text: metric.name},
                            xAxis: [{name: '时间', type: 'time'}],
                            yAxis: [{
                                type: 'value',
                                scale: true,
                                axisLabel: {
                                    show: true,
                                    formatter: `function(v){return AMCOMMON.formatValue(v,'${metric.type}')}`
                                }
                            }],
                            tooltip: {
                                trigger: 'axis', order: 'valueDesc', renderMode: 'richText',
                                valueFormatter: `function(v){return AMCOMMON.formatValue(v,'${metric.type}')}`
                            },
                            series: `\$\{chart_${group.name}_m${m}_series\}`
                        }
                    },
                ]
            })
        }
        services.push(svc)
    }
}

// 按钮刷新所有组件
let button = {
    type: 'button', label: '刷新', onEvent: {click: {actions: []}}
}
for (g in context.groups) {
    button.onEvent.click.actions.push({
        actionType: 'reload',
        componentId: `componentId_${context.groups[g].name}`
    })
}

form.body.push(container)
form.body.push(button)
form.body.push({type: 'divider'})
form.body.push(...services)
result.body.push(form)
// debugger
console.info(result)
return result